<template>
  <div class="withdraw">
    <h3 @click="toUrl">我的美豆</h3>
    <div class="recordContainer" v-if="drawRecordList.length>0">
      <withdraw-item 
      v-for="(item,index) in drawRecordList" 
      :key="index" 
      :withdrawalIntrgral = 'item.changeIntegral'
      :withdrawalMoney = 'item.changeMoney'
      :withdrawalTime = 'item.createdAt'
      :withdrawalState = 'item.status'
      >
      </withdraw-item>
    </div>
    <div class="drawFooter">
      <div class="drawNum">可提现美豆：<span>{{drawintegral}}</span></div>
      <div class="drawBtn" @click="replayBtn">申请提现到微信</div>
    </div>
    <draw-alert v-if="showdrawAlert" @cancel="cancel"></draw-alert>
  </div>
</template>

<script>
  import withdrawItem from './withdraw-item'
  import drawAlert from './draw-alert'
  export default {
    components:{
      withdrawItem,drawAlert
    },
    data(){
      return{
        drawRecordList: [],
        drawintegral: 0,//可提现美豆
        showdrawAlert: false,//是否显示提现的弹框
      }
    },
    onShow(){
      this.getDrawItem()
    },
    methods: {
      getDrawItem(){
        this.$http.get("agentWithdraw/findAllDetailAndBalance").then((res)=>{
          this.drawRecordList = res.data.data.records.reverse(); 
          this.drawintegral = res.data.data.balance;   
        })
      },
      replayBtn(){
        this.showdrawAlert = true
      },
      cancel(val){
        this.showdrawAlert = false
      },
      toUrl (){
        const url = "../user-integral/main";
        wx.navigateTo({ url }) 
      },
    }
  }
</script>

<style scoped>
.withdraw{
  background: #efeff4;
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
}
.withdraw>h3{
  width: auto;
  margin: 10rpx 24rpx;
  height: 80rpx;
  background:rgba(225,199,210,1);
  border: 1px solid rgba(225,199,210,1);
  border-radius: 10rpx;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
  line-height: 80rpx;
}
.recordContainer{
  padding-bottom: 120rpx;
}
.drawFooter{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 98rpx;
  background: #fff;
  border-top: 1px solid #F1F1F5;
  display: flex;
  font-size: 32rpx;
  color: #fff;
}
.drawFooter>div{
  display: flex;
  justify-content: center;
  align-items: center;
}
.drawFooter .drawNum{
  color: #000;
  flex: 1;
}
.drawFooter .drawNum>span{
  color: #E38A8A;
  font-size: 34rpx;
}
.drawFooter .drawBtn{
  background-color: #E1C7D2;
  width: 250rpx;
}
</style>
